<template>
	<view class="product_card" @click="getProductInfo">
		<view class="product_info">
			<view class="product_info_image">
				<u-image :src="product['productCover']">
				</u-image>
			</view>
			<view class="product_info_text">
				<view class="product_info_text_title">
					<span>{{product['productVariety']}}</span>
					<span style="color: #ff6645;font-size: 28rpx;">{{product['productPrice']}}/kg</span>
				</view>
				<view class="product_info_text_other">
					<my-icon v-if="product.goodsType === 1" name="time" :title="`距离发售还有${daysBetween}天`" size="40"
						mode="left" titleColor="#ff8d1a">
					</my-icon>
					<u-icon v-if="product.coopAuditStatus === auditstatus.notPass" name="info-circle" label="审核未通过" size="40"
						labelPos="left" color="#cacaca">
					</u-icon>
					<view>品类：{{product['productSpecies']}}</view>
					<view>重量：{{product['productWeight']}}</view>
					<view v-if="product.goodsType === 1">发售时间：{{product['marketTime'] | strLength(10)}}</view>
					<view v-else>发布时间：{{product['createTime'] | strLength(10)}}</view>
				</view>
			</view>
		</view>
		<view class="product_handle">
			<button class="product_button" @click.stop="delProduct">删除</button>
			<button class="product_button" @click.stop="editProduct">编辑</button>
			<button class="product_button" v-if="product.goodsType === 1" @click.stop="releaseProduct">发售</button>
		</view>
	</view>
</template>

<script>
	import lazyLoad from "components/common/lazyLoad"
	import myIcon from "components/common/myIcon"
	import {mapGetters} from "vuex"
	import {
		deleteProductById,
		releaseProductNowById
	} from "apis/farmer/goods"
	import {
		myPublishDataStatus
	} from "utils/enums/myPublish"
	import {
		getNowDaysBetween
	} from "utils/time"
	/*  审核状态，-1 审核中 0 不通过 1 通过  */
	const auditstatus = Object.freeze({
		unautidted: -1, 
		notPass: 0,
		pass: 1
	})
	export default {
		name: "PublishCard",
		components: {
			lazyLoad,
			myIcon
		},
		data(){return {auditstatus}},
		props: ['product'],
		computed: {
			...mapGetters(['getRoleValue']),
			daysBetween() {
				if (this.product.goodsType !== myPublishDataStatus.preSale) return 0
				const time = this.product?.marketTime || new Date()
				return getNowDaysBetween(time)
			}
		},
		methods: {
			async releaseProduct() {
				const {
					id,
					type
				} = this.product
				const {
					code,
					msg
				} = await releaseProductNowById(id, type)
				if (code !== 200) return this.$errorMsg(msg)
				this.$successMsg("发售成功")
				// that.$emit("delete",id)
			},
			delProduct() {
				const that = this
				that.$showCancelModule("确认删除该商品？", async () => {
					const {
						id,
						goodsType,
						pageType
					} = that.product
					const {
						code,
						msg
					} = await deleteProductById(id, goodsType, pageType)
					if (code !== 200) return that.$errorMsg(msg)
					that.$successMsg("删除成功")
					that.$emit("delete", id)
				})

			},
			getProductInfo() {
				const {
					id,
					// goodsType
				} = this.product
				if (this.product.status === myPublishDataStatus.audit) return null
				const type = this.getRoleValue
				console.log(this.getRoleValue,this.$store.state)
				this.pushNewPage("product", {
					id,
					type
				})
			},
			editProduct() {
				const {
					id,
					goodsType,
					pageType
				} = this.product
				this.pushNewPage("sends_goods", {
					id,
					goodsType,
					pageType
				})
			}
		}
	}
</script>

<style scoped>
	.product_card {
		width: 100%;
		height: 320rpx;
		box-sizing: border-box;
		padding: 5rpx;
		background-color: #fff;
		border: 0.3px solid rgba(229, 229, 229, 1);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.product_info {
		height: 65%;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-item: center;
		overflow: hidden;
	}

	.product_info_image {
		width: 40%;
		height: 100%;
		flex-basis: 200rpx;
		border-radius: 5px;
		margin-right: 10rpx;
	}

	.product_info_text {
		width: 56%;
	}

	.product_handle {
		width: 100%;
		height: 30%;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.product_button {
		width: 140rpx;
		height: 60rpx;
		margin: 0 10rpx;
		padding: 0;
		display: grid;
		place-content: center;
		font-size: 28rpx;
		border-radius: 20rpx;
		color: #fff;
		background-color: #ff7733;
	}

	.product_info_text_title {
		display: flex;
		justify-content: space-between;
		font-size: 34rpx;
		font-weight: 500;
		color: rgb(56, 56, 56);
	}

	.product_info_text_other {
		font-size: 28rpx;
		color: rgb(128, 128, 128);
		height: 80%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
</style>
